<template>
  <div class="crumbs" v-if="topMenuList.length > 0" style="height: 40px;">
    <el-tabs v-model="editableTabsValue" type="card" closable 
    @tab-remove="removeTab"
    @tab-click="toRouter"
    >
      <el-tab-pane
        v-for="(item) in topMenuList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style>
.crumbs {
  background: #F0F2F5;
}
.crumbs .el-tabs__nav-wrap {
  margin-bottom: 0;
}
.crumbs .el-tabs--card>.el-tabs__header {
  box-shadow:0px 1px 2px 0px rgba(187,187,187,0.5) !important;
  border-bottom: none;
}
.crumbs .el-tabs__header{
  margin-bottom: 0;
}

.crumbs .el-tabs__item.is-active{
  color: #FC8434;
}
.crumbs .el-tabs__item {
  border-radius: 4px !important;
  border: none;
  font-size: 12px;
  border-bottom: none !important;
  border-left: none !important;
  color: #909399;
  background: #FFFFFF;
  box-shadow:0px 1px 2px 0px rgba(187,187,187,0.5) !important;
}
.crumbs .el-tabs__item:hover{
  color: #FC8434 !important;
}
.crumbs .el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none;
}

</style>

<script>
import {
  mapState,
  mapMutations
} from 'vuex'

export default {
  data() {
    return {
      editableTabsValue: 'roleManagement',
      topMenuList: [
      ],
    }
  },
  created() {
    // console.log(this.activeMenuItem)
  },
  watch: {
    activeMenuItem(newVal, oldVal) {
      // console.log(newVal)
      let menuList = this.topMenuList
      let flag = false;
      // console.log(newVal)
      if(menuList.length > 0) {
        for(var i=0; i<menuList.length; i++) {
          if(menuList[i].name == newVal.name) {
            flag = true;
            break;
          }else{
            flag = false;
          }
        }

        if(flag) {
          this.editableTabsValue = newVal.name;
        }else{
          menuList.push(newVal);
          this.editableTabsValue = newVal.name;
        } 
      }else{
        menuList.push(newVal);
        this.editableTabsValue = newVal.name;
      }

    }
  },
  
  methods: {
    ...mapMutations([
      "updateInfo"
    ]),
    removeTab(targetName) {
      let tabs = this.topMenuList;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      
      this.editableTabsValue = activeName;

      this.$router.push({
        name: this.editableTabsValue,
      })
      this.topMenuList = tabs.filter(tab => tab.name !== targetName);
    },

    toRouter(tab) {
      // console.log(this.activeMenuItem)    // 此处更新vuex的activeMenuItem 信息
      if(tab.name) {
        this.updateInfo(["activeMenuItem", tab]);
      }
      // console.log(tab)
      this.$router.push({
        name: tab.name,
      })
    }
  },
  computed: {
    ...mapState([
      "activeMenuItem",
    ])
  },
}
</script>